<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>FTA Management Mind Map</title>
        <script src="https://d3js.org/d3.v7.min.js"></script>
        <style>
            body {
                margin: 0;
                padding: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 100vh;
                background: #fff;
                box-sizing: border-box;
                overflow: hidden;
            }
            #mindmap {
                width: 100%;
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
                overflow: hidden;
            }
            .node {
                cursor: pointer;
            }
            .node rect {
                fill: white;
                stroke-width: 2px;
                rx: 15;
                ry: 15;
            }
            .node text {
                font: 12px sans-serif;
                dominant-baseline: middle;
            }
            .link {
                fill: none;
                stroke-width: 2px;
            }
            /* 定义不同层级节点的颜色 */
            .depth-0 rect {
                stroke: #8a2be2;
                fill: white;
            }
            .depth-1 rect {
                stroke: #8a2be2; /* 紫色 */
                fill: #f8f6fe;
            }
            .depth-1.blue rect {
                stroke: #4169e1; /* 蓝色 */
                fill: #f6f8fe;
            }
            .depth-1.green rect {
                stroke: #3cb371; /* 绿色 */
                fill: #f6fef8;
            }
            .depth-1.yellow rect {
                stroke: #ffd700; /* 黄色 */
                fill: #fefdf6;
            }
            .depth-1.pink rect {
                stroke: #ff69b4; /* 粉色 */
                fill: #fef6f8;
            }
            /* 连接线颜色 */
            .link.purple {
                stroke: #8a2be2;
            }
            .link.blue {
                stroke: #4169e1;
            }
            .link.green {
                stroke: #3cb371;
            }
            .link.yellow {
                stroke: #ffd700;
            }
            .link.pink {
                stroke: #ff69b4;
            }
        </style>
    </head>
    <body>
        <div id="mindmap"></div>
        <script>
            // 定义思维导图数据
            const data = {
                name: "FTA Management",
                children: [
                    {
                        name: "Rules of Origin Certificate",
                        color: "purple",
                        children: [
                            {
                                name: "How to query specific FTA rules of origin",
                            },
                            { name: "What is BOM (Bill of material)" },
                            { name: "Classification and Concepts of Origins" },
                            {
                                name: "General origin determination standards and terms interpretation",
                            },
                        ],
                    },
                    {
                        name: "Process for determining origins",
                        color: "blue",
                        children: [
                            {
                                name: "Inquiry method of FTA preferential duty rate",
                            },
                            { name: "China-ASEAN FTA Origin Determination" },
                            { name: "China-Korea FTA Origin Determination" },
                            {
                                name: "IKEA Accessory Package Origin Determination",
                            },
                        ],
                    },
                    {
                        name: "Documents Filling Requirements",
                        color: "green",
                        children: [
                            { name: "DOC1 (Supplier Self Declaration)" },
                            { name: "DOC 2 (Cost Details of Raw Materials)" },
                            { name: "DOC 3 (IKEA Supplier Data Upload File)" },
                            { name: "DOC 4 (Raw material list)" },
                            { name: "Interconnection of DOC1,2,3,4" },
                            {
                                name: "Form E and CKFTA certificate filling requirement",
                            },
                        ],
                    },
                    {
                        name: "FTA implementation and operation",
                        color: "yellow",
                        children: [
                            { name: "DOC 2 and DOC 3 verification" },
                            { name: "Update BOM information in access tool" },
                            {
                                name: "Split files in article level for certificate",
                            },
                            {
                                name: "Lead time monitoring and trouble shooting",
                            },
                        ],
                    },
                    {
                        name: "Performance evaluation",
                        color: "pink",
                        children: [
                            {
                                name: "Performance evaluation measurement and goal",
                            },
                            { name: "Weekly and monthly KPI" },
                        ],
                    },
                ],
            };

            // 设置基础尺寸
            const baseWidth = 1200;
            const baseHeight = 800;

            // 创建SVG容器
            const svg = d3
                .select("#mindmap")
                .append("svg")
                .attr("width", "100%")
                .attr("height", "100%")
                .attr("viewBox", `0 0 ${baseWidth} ${baseHeight}`)
                .attr("preserveAspectRatio", "xMidYMid meet");

            // 创建一个包含所有内容的组
            const g = svg.append("g");

            // 创建树形布局
            const tree = d3.tree().size([baseHeight * 0.8, baseWidth * 0.8]);

            // 生成树形数据
            const root = d3.hierarchy(data);
            tree(root);

            // 创建连接线
            const link = g
                .selectAll(".link")
                .data(root.links())
                .join("path")
                .attr("class", (d) => `link ${d.source.data.color || "purple"}`)
                .attr(
                    "d",
                    d3
                        .linkHorizontal()
                        .x((d) => d.y)
                        .y((d) => d.x)
                );

            // 创建节点组
            const node = g
                .selectAll(".node")
                .data(root.descendants())
                .join("g")
                .attr(
                    "class",
                    (d) => `node depth-${d.depth} ${d.data.color || ""}`
                )
                .attr("transform", (d) => `translate(${d.y},${d.x})`);

            // 添加节点矩形
            node.append("rect")
                .attr("x", (d) => {
                    const textLength = d.data.name.length;
                    const width = Math.max(120, textLength * 8);
                    return -width / 2;
                })
                .attr("y", -15)
                .attr("width", (d) => {
                    const textLength = d.data.name.length;
                    return Math.max(120, textLength * 8);
                })
                .attr("height", 30);

            // 添加节点文本
            node.append("text")
                .attr("dy", "0.31em")
                .attr("text-anchor", "middle")
                .text((d) => d.data.name)
                .clone(true)
                .lower()
                .attr("stroke", "white")
                .attr("stroke-width", 3);

            // 计算整体边界
            const bounds = g.node().getBBox();

            // 计算缩放和平移
            const scale =
                Math.min(baseWidth / bounds.width, baseHeight / bounds.height) *
                0.9; // 留出10%的边距

            // 计算居中位置
            const translateX =
                (baseWidth - bounds.width * scale) / 2 - bounds.x * scale;
            const translateY =
                (baseHeight - bounds.height * scale) / 2 - bounds.y * scale;

            // 应用变换
            g.attr(
                "transform",
                `translate(${translateX},${translateY}) scale(${scale})`
            );
        </script>
    </body>
</html>
